﻿@page "/chart/trendlines"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample shows the trend of Indian rupees and US dollar variations with the trend in the chart.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the trendlines. The trendline is a line drawn over the chart to display the overall direction of the results.</p>
    <p> The chart supports the following trendline types.</p>
    <ul>
        <li>Linear</li>
        <li>Exponential</li>
        <li>Logarithmic</li>
        <li>Polynomial</li>
        <li>Power</li>
        <li>Moving Average</li>
        <li>Forecasting</li>
    </ul>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p> More information about the trendlines can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/trend-lines'>documentation section</a>.</p>
</ActionDescription>

<style>

    #trendline_Series_0_TrendLine_0 {
        stroke-dasharray: 10px 10px;
        stroke-linejoin: round;
        stroke-linecap: round;
        -webkit-animation: dash 1s linear infinite;
        animation: dash 1s linear infinite;
    }

    @@-webkit-keyframes dash {
        100% {
            stroke-dashoffset: -20px;
        }
    }

    @@keyframes dash {
        100% {
            stroke-dashoffset: -20px;
        }
    }
</style>

<div class="control-section">
    <SfChart ID="trendline" Title="Historical Indian Rupee Rate (INR USD)" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis LabelFormat="yyyy" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="Rupees against Dollars">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" Name="Rupees" XName="Period" YName="Rupees" Type="ChartSeriesType.Spline">
                <ChartMarker Visible="true">
                </ChartMarker>
                <ChartTrendlines>
                    <ChartTrendline Type="TrendlineTypes.Linear" Width="3" Name="Trends" Fill="#C64A75">
                    </ChartTrendline>
                </ChartTrendlines>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<TrendlineData> ChartPoints { get; set; } = new List<TrendlineData>
    {
        new TrendlineData { Period = new DateTime(2000, 2, 11), Rupees = 14 },
        new TrendlineData { Period = new DateTime(2001, 9, 4), Rupees = 20 },
        new TrendlineData { Period = new DateTime(2002, 2, 11), Rupees = 25 },
        new TrendlineData { Period = new DateTime(2003, 9, 16), Rupees = 21 },
        new TrendlineData { Period = new DateTime(2004, 2, 7), Rupees = 13},
        new TrendlineData { Period = new DateTime(2005, 9, 7), Rupees = 18 },
        new TrendlineData { Period = new DateTime(2006, 2, 11), Rupees = 24 },
        new TrendlineData { Period = new DateTime(2007, 9, 14), Rupees = 23 },
        new TrendlineData { Period = new DateTime(2008, 2, 6), Rupees = 19 },
        new TrendlineData { Period = new DateTime(2009, 9, 6), Rupees = 31 },
        new TrendlineData { Period = new DateTime(2010, 2, 11), Rupees = 39},
        new TrendlineData { Period = new DateTime(2011, 9, 11), Rupees = 50 },
        new TrendlineData { Period = new DateTime(2012, 2, 11), Rupees = 24 },
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class TrendlineData
    {
        public DateTime Period { get; set; }
        public double Rupees { get; set; }
    }
}
